@import 'src/styles/theme';

$badge-box-shadow: 0 4px 8px 0
  rgba(
    $color: $red-color,
    $alpha: 0.2,
  );

.ele-badge {
  position: relative;
  display: inline-block;
  font-size: 0;
  vertical-align: middle;

  /* elements */
  &-dot {
    position: absolute;
    right: -6px;
    top: -6px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    overflow: hidden;
    background: $red-color;
    box-shadow: $badge-box-shadow;
  }

  &-num {
    position: absolute;
    padding: 0 10px;
    top: -14px;
    right: -6px;
    color: white;
    font-size: 24px;
    line-height: 1.4;
    border-radius: 14px 14px 14px 0;
    background: $red-color;
    box-shadow: $badge-box-shadow;
    transform: translate(50%, 0);
    overflow: hidden;
    z-index: 1;
  }
}
